<script lang="ts">
import { defineComponent } from "vue";
import { downloadIcon } from "@/util";
interface TypeOfYourItem {
  name: string,
  created_at: string,
  file_suffix: string,
}
export default defineComponent({
  props: {
    List: {
      type: Array<TypeOfYourItem>,
      default: [] as any[],
    },
    pageSize: {
      type: Number,
    },
    count: {
      type: Number,
    },
  },

  emits: ['pageChange'],
  setup(props, context) {
    const pageChange = (page: number) => {
      context.emit('pageChange', page)
      document.body.scrollTop = document.documentElement.scrollTop =  0
    }
    const Download = (item: any) => {
    }
    return {
      pageChange,
      downloadIcon,
      Download
    }
  }
})
</script>
    
    
<template>
  <div class="wishlist">
    <div class="wishlistHeader">Support</div>
    <div v-if="List.length < 1" class="contentText">
      很抱歉，没有找到匹配项。
    </div>
    <div v-else class="productList">
      <el-row v-for="(item, index) in List" :key="index" class="productItem">
        <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="info">
          <div class="iconfont_box">
            <i
              class="iconfont"
              :class="downloadIcon[item?.file_suffix || 'pdf']"
            ></i>
          </div>
          <div class="text">
            <div class="route">support</div>
            <div class="name">{{ item.name }}</div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="collect">
          <el-button
            class="el_bun btnStyle"
            style="left: 0"
            type="primary"
            round
            size="large"
            >View</el-button
          >
          <el-button
            class="el_bun btnStyle"
            style="right: 0"
            type="primary"
            round
            size="large"
            @click="Download(item)"
          >
            Download</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="page">
      <el-pagination
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="count"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>
    
<style lang="scss" scoped>
.wishlist {
  padding: 0 20px;

  .wishlistHeader {
    padding: 30px 0;
    font-size: $userHeaderTitle;
    color: $auxiliaryColor;
    border-bottom: 1px solid #dfdfdf;
  }
  .contentText {
    margin-top: 20px;
  }
  .productList {
    width: 100%;

    .productItem {
      border-bottom: 1px solid #dfdfdf;
      padding: 20px 0;
      display: flex;
      justify-content: space-between;

      .info {
        display: flex;

        .iconfont_box {
          width: 77px;
          height: 78px;

          .iconfont {
            color: #6e6e73;
            font-size: 68px;
          }
        }

        .text {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          margin-left: 20px;
          font-size: $text;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .route {
            color: $auxiliaryColor2;
          }

          .name {
            font-size: $userText;
            color: $auxiliaryColor;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .src {
            color: $mainColor;
          }
        }
      }

      .collect {
        // display: flex;
        // align-items: center;
        font-size: $demand;
        position: relative;

        .el_bun {
          background-color: #fff;
          color: $mainColor;
          border: 0;
          // text-decoration: underline;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }

  .page {
    display: flex;
    justify-content: center;
    margin: 30px 0;
  }
}

.el-pager li {
  font-size: $text;
}

.iconfont {
  font-size: 40px;
  color: $mainColor;
}

#collection {
  color: #fff;
  font-size: 35px;
  background-color: $mainColor;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

@media screen and (max-width: 768px) {
  .collect {
    // overflow: hidden;
    .el_bun {
      position: inherit !important;
      transform: translateY(0%) !important;
      top: 0 !important;
    }
  }
}
</style>